<template>
    <div class="paper-detail-container">
        <!-- 下载按钮 -->
        <el-button type="primary" icon="document" @click="downloadPdf"
            style="position: absolute; top: 20px; right: 100px;">
            下载试卷 PDF
        </el-button>
        <div id="paper-content">
            <h2 class="paper-title">{{ paper.name }}</h2>
            <p class="paper-info">
                总分：<strong>{{ paper.totalScore }}</strong> | 及格线：<strong>{{ paper.passScore }}</strong>
            </p>


            <div v-for="(q, index) in paper.questions" :key="q.id" class="question-item">
                <!-- 单选 / 多选 -->
                <div v-if="q.type !== 'JUDGE'" class="question-header">
                    <span class="question-number">{{ index + 1 }}.</span>
                    <span class="question-type">[{{ questionTypeLabel(q.type) }}]</span>
                    <span class="question-content-inline">
                        {{ q.content }}
                    </span>
                    <span class="score-label">（{{ q.score }}分）</span>
                    <span class="answer-box">（　　）</span>
                </div>

                <!-- 判断题 -->
                <div v-else class="judge-answer">
                    <span class="question-number">{{ index + 1 }}.</span>
                    <span class="question-type">[判断题]</span>
                    {{ q.content }}
                    <span class="score-label">（{{ q.score }}分）</span>
                    <span class="answer-box">（　　）</span>
                </div>

                <!-- 选项 -->
                <div v-if="q.type !== 'JUDGE'" class="question-options">
                    <div v-for="(opt, i) in parseOptions(q.options)" :key="i" class="option-item">
                        <strong>{{ String.fromCharCode(65 + i) + '.' }}</strong>
                        {{ removePrefix(opt) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import api from '../services/api';
import html2pdf from 'html2pdf.js';

const route = useRoute();
const paper = ref({});

onMounted(async () => {
    const res = await api.getPaperDetails(route.params.id);
    paper.value = res.data;
});

function questionTypeLabel(type) {
    switch (type) {
        case 'SINGLE': return '单选题';
        case 'JUDGE': return '判断题';
        case 'MULTIPLE': return '多选题';
        default: return type;
    }
}

function parseOptions(optionsStr) {
    try {
        return JSON.parse(optionsStr);
    } catch (e) {
        return [];
    }
}

function removePrefix(option) {
    return option.replace(/^([A-Za-z]\.\s*)/, '');
}

function downloadPdf() {
    const element = document.getElementById('paper-content');
    if (!element) {
        console.error('找不到 #paper-content 元素');
        return;
    }

    const opt = {
        margin: [15, 20, 15, 20],
        filename: `${paper.value.name || '试卷'}.pdf`,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 }, // 提高清晰度
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };

    html2pdf().set(opt).from(element).save();
}
</script>

<style scoped>
.paper-detail-container {
    padding: 60px 100px;
    max-width: 1000px;
    margin: auto;
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 标题 */
.paper-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

/* 总分及格线信息 */
.paper-info {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}



/* 每道题容器 */
.question-item {
    margin-bottom: 20px;
    padding-bottom: 10px;
    /* border-bottom: 1px dashed #ccc; */
}

/* 题号 + 题型 + 题干 在同一行 */
.question-header,
.judge-answer {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.question-number {
    min-width: 30px;
    text-align: right;
    margin-right: 8px;
    font-size: 15px;
}

.question-type {
    color: #409EFF;
    margin-right: 8px;
    min-width: 60px;
}

.question-content-inline {
    display: inline;
    max-width: none;
}

.answer-box {
    min-width: 60px;
    text-align: center;
    font-size: 14px;
    color: #333;
    margin: 0 10px;
}

.score-label {
    font-size: 14px;
    color: #888;
}

/* 选项列表 */
.question-options {
    margin-top: 8px;
    margin-left: 40px;
}

.option-item {
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

@media print,
screen {
    .question-item {
        page-break-inside: avoid;
        /* 避免跨页断开 */
        break-inside: avoid;
        /* 兼容不同浏览器 */
    }

    .question-options {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}
</style>